<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			
			
		</canvas>
	</body>
	<script>
	window.onload =function(){
		var canvas = document.getElementById("canvas");
				 canvas.width =800;
	            canvas.height =800;	 
	        var context = canvas.getContext("2d");//2d环境
	        
	        //画一个月亮
			context.arc(400,400,300,0.5*Math.PI,1.5*Math.PI,true);
			context.moveTo(400,100);
			context.arcTo(1200,400,400,700,(400-100)*dis(400,100,1200,400)/(1200-400));
			context.stroke();
			
			//调用函数画出月亮
			fillMoon(context,3,200,200,150,30);
	}
	
	//计算公式
		function dis(x1,y1,x2,y2){
			return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
		}
			
		
		//封装函数     绘制填充色的月亮
		function fillMoon(cxt,d,x,y,r,rot,/*optional可选的*/ fillColor){//环境，d表示月亮的满度越大越弯，x y月亮的位置，r半径，rot旋转角度，颜色
			cxt.save();
			cxt.translate(x,y);
			cxt.rotate(rot*Math.PI/180);
			cxt.scale(r,r);
			pathMoon(cxt,d);
			cxt.fillStyle=fillColor||"#fb5";
			cxt.fill();
			cxt.restore();

		}
	function pathMoon(cxt,d){//绘制月亮的轮廓
		cxt.beginPath();
		cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);//0,0为圆心1为半径,0.5π到1.5π逆时针绘制
		cxt.moveTo(0,-1);//移动当前点到0 -1
		cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);//
		cxt.closePath();
		
	}
			
			
		
	</script>
</html>
